<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">考试</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">考试详情</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="introduction">
      <div class="text1">亲爱的student1同学：</div>
      <div class="text">你参加了2019级软件工程期末考试，这一次考试根据本学期相关课程的教学大纲及培养目标测量出你的学习情况，并形成报告。</div>
      <div class="text">本次报告将向你说明相关课程考试分数背后的意义，它除了评估你在学习上的整体情况，还分别多维度、多角度地进行检测;我们根据检测结果提出一些建议，希望你变得更出色。</div>
      <div class="text">我们鼓励你与你的老师共同讨论这些报告，以便更深入的了解你的学习状态，以提供更适合你的教育资源，有效改善学习方式。</div>
      <div class="text">我们衷心期望你能在科学评价指导的基础上获得更大的学业成就，在未来的学习上也更为自信与愉快。</div>
    </div>
    <div class="content">
      <div class="contentBox">
        <header class="header">
          <div style="display: flex; margin: 5px">
            <svg t="1649664436633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1420" width="35" height="35"><path d="M892.16 384l-75.093333-74.24a42.666667 42.666667 0 0 0-60.586667 0l-276.053333 276.053333a44.8 44.8 0 0 0-11.52 21.76l-19.626667 94.72a42.666667 42.666667 0 0 0 42.666667 51.2h8.533333l95.146667-19.626666a42.666667 42.666667 0 0 0 21.333333-11.52l276.053333-276.053334A42.666667 42.666667 0 0 0 892.16 384z m-327.253333 267.093333l-18.773334 3.84 3.84-18.773333 236.8-236.8 14.933334 14.933333z" fill="#70c2ed" p-id="1421" data-spm-anchor-id="a313x.7781069.0.i6" class=""></path><path d="M817.493333 565.76a42.666667 42.666667 0 0 0-42.666666 42.666667v166.4A78.933333 78.933333 0 0 1 696.32 853.333333H291.84A78.933333 78.933333 0 0 1 213.333333 774.826667V330.24A78.506667 78.506667 0 0 1 290.133333 251.733333a85.333333 85.333333 0 0 0 85.333334 80.64h238.08a85.333333 85.333333 0 0 0 85.333333-80.64 78.506667 78.506667 0 0 1 48.64 17.92 42.666667 42.666667 0 0 0 27.306667 10.24 42.666667 42.666667 0 0 0 27.306666-75.52 163.84 163.84 0 0 0-103.253333-37.973333 85.333333 85.333333 0 0 0-85.333333-81.066667H375.04a85.333333 85.333333 0 0 0-85.333333 81.066667A163.84 163.84 0 0 0 128 330.24v444.586667A163.84 163.84 0 0 0 291.84 938.666667h404.48a164.266667 164.266667 0 0 0 163.84-163.84v-166.4a42.666667 42.666667 0 0 0-42.666667-42.666667zM375.04 170.666667h238.08v76.373333H375.04z" fill="#13227a" p-id="1422" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path><path d="M512 458.666667a42.666667 42.666667 0 0 0-42.666667-42.666667H309.333333a42.666667 42.666667 0 0 0 0 85.333333H469.333333a42.666667 42.666667 0 0 0 42.666667-42.666666zM309.333333 586.666667a42.666667 42.666667 0 0 0 0 85.333333h55.466667a42.666667 42.666667 0 0 0 0-85.333333z" fill="#70c2ed" p-id="1423" data-spm-anchor-id="a313x.7781069.0.i5" class=""></path></svg>
            <div style="line-height: 35px; font-size: 16px; font-weight: bold; margin-left: 5px; color: #000000;">分数情况</div>
          </div>
        </header>
        <div id="scoreInfo"></div>
      </div>
      <div class="contentBox">
        <header class="header">
          <div style="display: flex; margin: 5px">
            <svg t="1649664797584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3008" data-spm-anchor-id="a313x.7781069.0.i9" width="32" height="32"><path d="M424.760889 122.737778c-83.143111 0-164.977778 87.125333-164.977778 212.167111 0 23.381333 10.097778 50.432 27.733333 80.128 14.449778 24.376889 31.374222 46.506667 47.075556 66.958222l9.898667 13.084445c14.620444 19.2 25.827556 42.325333 25.116444 68.551111-0.682667 27.306667-13.994667 48.583111-29.354667 63.914666-10.666667 10.638222-24.234667 19.143111-36.778666 26.168889-12.714667 7.196444-28.330667 14.990222-45.340445 23.466667l-0.853333 0.483555c-35.157333 17.578667-80.924444 40.448-138.24 74.865778-18.005333 10.837333-24.234667 27.192889-24.234667 77.397334 0 11.605333 4.266667 20.650667 17.692445 30.321777 15.303111 11.093333 40.334222 20.707556 75.178666 27.676445 69.290667 13.937778 158.606222 14.193778 236.202667 12.743111l21.959111-0.398222c68.920889-1.166222 142.08-2.389333 200.561778-14.421334 32.341333-6.599111 54.954667-15.616 68.579556-25.884444 11.52-8.618667 16.128-17.351111 16.184888-30.264889a148.195556 148.195556 0 0 0-9.244444-48.184889c-6.599111-18.090667-14.392889-28.245333-19.057778-31.715555-43.178667-32.426667-86.812444-54.357333-124.046222-71.537778-6.456889-3.015111-13.084444-5.973333-19.655111-8.96-10.382222-4.608-20.679111-9.386667-30.919111-14.279111-13.112889-6.4-30.321778-15.274667-42.524445-27.477334-15.36-15.36-28.672-36.579556-29.354666-63.886222-0.711111-26.254222 10.524444-49.379556 25.059555-68.608l9.955556-12.999111c15.701333-20.508444 32.625778-42.638222 47.075555-66.958222 17.635556-29.752889 27.733333-56.803556 27.733334-80.213334 0-63.544889-15.985778-118.414222-41.813334-155.932444-25.031111-36.494222-58.595556-56.206222-99.612444-56.206222zM165.518222 334.904889C165.518222 177.038222 272.184889 28.444444 424.760889 28.444444c76.828444 0 137.557333 39.224889 177.294222 97.024C641.109333 182.243556 660.451556 257.024 660.451556 334.904889c0 48.327111-19.996444 92.956444-40.903112 128.284444-17.607111 29.696-38.684444 57.031111-54.357333 77.539556l-8.533333 11.178667c-1.991111 2.503111-3.697778 5.176889-5.176889 8.021333l1.080889 1.024c1.024 0.711111 5.404444 3.697778 16.952889 9.244444 7.879111 3.868444 16.469333 7.736889 26.510222 12.259556l22.328889 10.183111c39.367111 18.204444 90.026667 43.377778 141.084444 81.720889 25.685333 19.285333 41.614222 49.123556 51.000889 74.723555 9.699556 26.595556 15.075556 55.921778 14.990222 81.066667-0.227556 46.023111-21.788444 81.152-53.816889 105.244445-29.980444 22.471111-68.465778 35.072-106.268444 42.808888-67.726222 13.937778-150.215111 15.274667-217.372444 16.355556l-22.272 0.398222c-76.686222 1.422222-175.786667 1.706667-256.597334-14.592-40.163556-8.049778-80.469333-21.105778-111.701333-43.633778C24.120889 912.782222 0.540444 877.283556 0.540444 829.923556c0-48.924444 3.072-118.101333 70.058667-158.264889 60.416-36.295111 108.885333-60.529778 144.355556-78.250667l0.199111-0.113778a1089.706667 1089.706667 0 0 0 42.126222-21.76c11.093333-6.257778 15.189333-9.528889 16.327111-10.666666l0.881778-0.938667a50.460444 50.460444 0 0 0-5.176889-8.021333l-8.533333-11.178667c-15.729778-20.48-36.750222-47.843556-54.328889-77.539556-20.935111-35.328-40.931556-79.957333-40.931556-128.284444z" p-id="3009" data-spm-anchor-id="a313x.7781069.0.i0" class="" fill="#e0620d"></path><path d="M655.957333 123.733333c2.816-12.231111 10.24-22.897778 20.679111-29.525333a45.226667 45.226667 0 0 1 34.929778-5.888c48.526222 11.633778 93.013333 35.726222 125.240889 75.804444 32.483556 40.391111 49.265778 92.956444 49.265778 155.192889 0 74.069333-18.403556 123.562667-56.433778 172.259556a19.399111 19.399111 0 0 0-2.446222 6.087111 52.906667 52.906667 0 0 0 0.170667 26.595556c6.656 6.087111 17.863111 15.018667 32.853333 26.936888l22.016 17.692445c26.368 21.219556 57.543111 47.217778 82.801778 73.159111 32.682667 33.564444 59.790222 92.216889 59.505777 155.818667-0.426667 79.559111-69.404444 139.093333-138.467555 139.093333a46.051556 46.051556 0 0 1-40.078222-23.779556 48.64 48.64 0 0 1 0-47.502222c8.277333-14.705778 23.552-23.751111 40.106666-23.751111 23.381333 0 45.795556-22.471111 45.909334-44.487111 0.199111-37.888-16.924444-72.334222-32.369778-88.206222-21.020444-21.589333-48.412444-44.515556-74.496-65.564445l-17.436445-13.966222c-18.488889-14.734222-36.124444-28.842667-45.880888-38.257778a91.278222 91.278222 0 0 1-22.670223-38.570666c-3.896889-12.8-5.973333-26.168889-6.115555-39.594667-0.369778-24.888889 5.262222-56.661333 24.433778-81.180444 24.519111-31.345778 36.067556-59.761778 36.067555-112.782223 0-44.202667-11.662222-74.24-28.074667-94.663111-16.64-20.707556-41.642667-35.811556-74.951111-43.832889-11.946667-2.844444-22.300444-10.496-28.785777-21.191111-6.456889-10.695111-8.533333-23.608889-5.774223-35.868444z m172.999111 402.915556l-0.256-0.398222 0.284445 0.398222z" p-id="3010" data-spm-anchor-id="a313x.7781069.0.i1" class="" fill="#f4ea29"></path></svg>
            <div style="line-height: 35px; font-size: 16px; font-weight: bold; margin-left: 5px; color: #000000;">个人与本院对比情况</div>
          </div>
        </header>
        <div style="display: flex; justify-content: space-around; padding: 0 30px; margin: 20px 0px 40px;">
          <div class="card1">
            <svg t="1649690382776" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3646" width="40" height="40"><path d="M512 0a512 512 0 0 1 512 512 512 512 0 0 1-512 512A512 512 0 0 1 0 512 512 512 0 0 1 512 0z" fill="#13227a" p-id="3647" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path><path d="M760.32 587.008a735.488 735.488 0 0 0-129.792-41.472 119.552 119.552 0 0 0 55.296-100.608v-71.424a119.296 119.296 0 0 0-238.848 0v71.168a119.552 119.552 0 0 0 51.2 97.28 712.192 712.192 0 0 0-146.432 44.544 58.88 58.88 0 0 0-34.816 51.2v86.784a44.544 44.544 0 0 0 44.032 38.656h389.12a46.08 46.08 0 0 0 43.52-31.744v-92.928a58.368 58.368 0 0 0-34.048-51.2" fill="#FFFFFF" p-id="3648" data-spm-anchor-id="a313x.7781069.0.i1" class=""></path><path d="M384 537.6c23.808-7.424 35.072-11.52 35.072-11.52s15.36-6.656 11.264-20.48a148.48 148.48 0 0 1-16.384-85.248V352s4.096-33.536 16.896-36.608a4.864 4.864 0 0 0 0-4.608 21.76 21.76 0 0 0-19.968-13.312 90.112 90.112 0 0 0-90.112 90.112v57.344a89.344 89.344 0 0 0 21.76 58.112A469.248 469.248 0 0 0 256 540.672a48.64 48.64 0 0 0-25.6 42.496v62.464a21.76 21.76 0 0 0 21.76 21.76 25.6 25.6 0 0 0 21.76-21.76v-9.984a92.672 92.672 0 0 1 41.472-75.52l15.36-6.4q25.6-7.424 53.504-15.872" fill="#FFFFFF" p-id="3649"></path></svg>
            <div>
              <div style="font-weight: bold; font-size: 22px; margin-bottom: 5px;">569</div>
              <div style="font-size: 12px; color: #777373">实考总人数</div>
            </div>
          </div>
          <div class="card2">
            <svg t="1649692778058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4757" width="40" height="40"><path d="M0 512A512 512 0 1 0 512 0 512 512 0 0 0 0 512z" fill="#e0620d" p-id="4758" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path><path d="M356.716089 757.282133H163.714844v-350.435555h193.001245z m257.035378 0H420.750222V260.460089h193.001245z m64.034133 0V524.458667h193.001244v232.823466z" fill="#FFFFFF" p-id="4759"></path><path d="M497.368178 359.424a62.976 62.976 0 0 0 6.007466-3.265422v113.777778h37.011912V302.318933h-23.893334l-1.410844 1.308445a105.710933 105.710933 0 0 1-36.693334 21.617778l-3.834311 1.376711v39.1168l5.9392-0.830578a58.2656 58.2656 0 0 0 16.873245-5.484089z m-191.146667 219.465956h-49.9712a120.740978 120.740978 0 0 1 15.928889-15.5648 134.781156 134.781156 0 0 0 20.115911-20.195556 67.310933 67.310933 0 0 0 13.653333-41.984 51.484444 51.484444 0 0 0-12.754488-36.738844 43.747556 43.747556 0 0 0-33.28-13.186845 63.260444 63.260444 0 0 0-39.822223 13.846756l-2.423466 1.911466v45.886578l8.840533-9.398044a38.126933 38.126933 0 0 1 27.431822-14.0288c10.911289 0 13.118578 5.575111 13.118578 13.960533a27.932444 27.932444 0 0 1-3.902578 14.279111 81.009778 81.009778 0 0 1-15.724089 17.840356 134.985956 134.985956 0 0 0-20.48 20.741689 77.141333 77.141333 0 0 0-10.8544 19.922488 70.189511 70.189511 0 0 0-4.027733 24.189156v17.692444h94.139733v-39.173688z m497.208889 65.058133a43.906844 43.906844 0 0 0 15.007289-36.408889 41.7792 41.7792 0 0 0-13.232356-32.6656 46.648889 46.648889 0 0 0-32.119466-11.195733 61.553778 61.553778 0 0 0-32.995556 8.840533l-2.889955 1.820444v42.2912l8.385422-6.9632a33.052444 33.052444 0 0 1 21.526755-8.817777c12.333511 0 14.040178 6.200889 14.040178 12.913777 0 4.221156 0 14.108444-19.968 14.108445h-15.633067v37.228089h16.531912a29.218133 29.218133 0 0 1 17.931377 4.653511 12.515556 12.515556 0 0 1 4.949334 10.979555 13.937778 13.937778 0 0 1-4.118756 10.979556 19.512889 19.512889 0 0 1-13.653333 4.391822 37.546667 37.546667 0 0 1-26.168889-10.057955l-8.510578-7.702756v44.566756l2.810311 1.797689a60.848356 60.848356 0 0 0 33.735111 8.487822 54.363022 54.363022 0 0 0 38.126934-13.448534 50.608356 50.608356 0 0 0 15.177955-38.877866 44.123022 44.123022 0 0 0-9.375289-28.353422 36.738844 36.738844 0 0 0-9.489066-8.567467z" fill="#e0620d" p-id="4760" data-spm-anchor-id="a313x.7781069.0.i1" class=""></path></svg>
            <div>
              <div style="font-weight: bold; font-size: 22px; margin-bottom: 5px;">100%</div>
              <div style="font-size: 12px; color: #777373">超过本院总体</div>
            </div>
          </div>
        </div>
        <span style="display: flex; margin: 10px; justify-content: space-around;"><div style="width: 20%; font-size: 13px">本院最低分</div>  <el-progress :percentage="37" :text-inside="true" :stroke-width="16" color="#13227a" :format="format"></el-progress></span>
        <span style="display: flex; margin: 10px; justify-content: space-around;"><div style="width: 20%; font-size: 13px">本院平均分</div>  <el-progress :percentage="76" :text-inside="true" :stroke-width="16" color="#13227a" :format="format"></el-progress></span>
        <span style="display: flex; margin: 10px; justify-content: space-around;"><div style="width: 20%; font-size: 13px">本院中位分</div>  <el-progress :percentage="73" :text-inside="true" :stroke-width="16" color="#13227a" :format="format"></el-progress></span>
        <span style="display: flex; margin: 10px; justify-content: space-around;"><div style="width: 20%; font-size: 13px">你的分数</div>  <el-progress :percentage="95" :text-inside="true" :stroke-width="16" color="#FF6A00" :format="format"></el-progress></span>
        <span style="display: flex; margin: 10px; justify-content: space-around;"><div style="width: 20%; font-size: 13px">本院最高分</div>  <el-progress :percentage="95" :text-inside="true" :stroke-width="16" color="#13227a" :format="format"></el-progress></span>

      </div>
      <div class="contentBox">
        <header class="header">
          <div style="display: flex; margin: 5px">
            <svg t="1649665292219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1444" width="35" height="35"><path d="M575.573333 768a42.666667 42.666667 0 0 1-30.293333-12.373333l-90.026667-90.026667a42.666667 42.666667 0 1 1 60.586667-60.16l59.733333 59.733333 122.026667-121.6a42.666667 42.666667 0 0 1 60.586667 0 42.666667 42.666667 0 0 1 0 60.16L605.866667 755.2a42.666667 42.666667 0 0 1-30.293334 12.8z" p-id="1445" fill="#faa5b9" data-spm-anchor-id="a313x.7781069.0.i20" class=""></path><path d="M215.466667 938.666667a128 128 0 0 1-90.453334-37.546667A128 128 0 0 1 87.466667 810.666667V213.333333a128 128 0 0 1 128-128h597.333333a128 128 0 0 1 128 128v597.333334a128 128 0 0 1-128 128h-597.333333z m0-768a42.666667 42.666667 0 0 0-42.666667 42.666666v597.333334a42.666667 42.666667 0 0 0 12.8 29.866666 42.666667 42.666667 0 0 0 29.866667 12.8H810.666667a42.666667 42.666667 0 0 0 42.666666-42.666666V213.333333a42.666667 42.666667 0 0 0-42.666666-42.666666z m682.666666 341.333333z" p-id="1446" data-spm-anchor-id="a313x.7781069.0.i18" class="" fill="#ea3138"></path><path d="M550.826667 341.333333h-256a42.666667 42.666667 0 1 1 0-85.333333h256a42.666667 42.666667 0 0 1 0 85.333333zM421.546667 512H296.106667a42.666667 42.666667 0 1 1 0-85.333333h125.44a42.666667 42.666667 0 0 1 0 85.333333z" p-id="1447" fill="#faa5b9" data-spm-anchor-id="a313x.7781069.0.i19" class=""></path></svg>
            <div style="line-height: 35px; font-size: 16px; font-weight: bold; margin-left: 5px; color: #000000;">知识点掌握情况</div>
          </div>
        </header>
        <div id="knowledgeInfo"></div>
      </div>
      <div class="contentBox">
        <header class="header">
          <div style="display: flex; margin: 5px">
            <svg t="1649665559744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2396" data-spm-anchor-id="a313x.7781069.0.i21" width="35" height="35"><path d="M917.333333 874.666667h-810.666666a42.666667 42.666667 0 0 0 0 85.333333h810.666666a42.666667 42.666667 0 0 0 0-85.333333zM279.466667 810.666667h465.066666a213.333333 213.333333 0 0 0 213.333334-213.333334V277.333333a213.333333 213.333333 0 0 0-213.333334-213.333333H279.466667a213.333333 213.333333 0 0 0-213.333334 213.333333V597.333333a213.333333 213.333333 0 0 0 213.333334 213.333334z m-128-533.333334a128 128 0 0 1 128-128h465.066666a128 128 0 0 1 128 128V597.333333a128 128 0 0 1-128 128H279.466667a128 128 0 0 1-128-128z" fill="#0d7225" p-id="2397" data-spm-anchor-id="a313x.7781069.0.i19" class=""></path><path d="M345.6 682.666667a100.693333 100.693333 0 0 0 71.253333-29.44l64.853334-64.853334 91.306666 20.053334a35.413333 35.413333 0 0 0 9.386667 0 42.666667 42.666667 0 0 0 30.293333-12.373334l131.84-131.84a42.666667 42.666667 0 0 0 11.52-38.826666l-23.04-111.786667v-3.413333a42.666667 42.666667 0 0 0-3.413333-7.68 30.293333 30.293333 0 0 0-4.266667-6.4l-2.133333-3.413334-3.413333-2.133333-7.68-5.12-6.826667-2.56h-26.026667a30.293333 30.293333 0 0 0-7.68 3.413333 26.453333 26.453333 0 0 0-7.253333 4.693334h-2.986667l-55.04 56.746666a15.786667 15.786667 0 0 1-22.186666 0 15.36 15.36 0 0 1 0-21.76L640 270.933333A42.666667 42.666667 0 0 0 642.133333 213.333333a22.613333 22.613333 0 0 0-2.56-4.266666h-3.413333a42.666667 42.666667 0 0 0-20.48-11.946667L502.186667 170.666667a42.666667 42.666667 0 0 0-39.253334 11.52L331.093333 315.306667a42.666667 42.666667 0 0 0-11.52 39.253333L341.333333 444.586667 273.92 512a100.693333 100.693333 0 0 0 71.68 170.666667z m-11.093333-111.786667l82.346666-82.346667 3.413334-5.12a32 32 0 0 0 2.986666-5.12A25.6 25.6 0 0 0 426.666667 469.333333a29.866667 29.866667 0 0 0 0-5.973333 42.666667 42.666667 0 0 0 0-10.24v-3.84l-20.053334-89.6 100.266667-99.413333 18.346667 3.84a101.12 101.12 0 0 0 71.253333 170.666666 101.12 101.12 0 0 0 70.4-28.586666l2.133333 11.52-98.986666 98.986666-82.773334-18.346666a42.666667 42.666667 0 0 0-46.933333 8.96l-84.053333 85.333333a15.36 15.36 0 0 1-21.76 0 15.36 15.36 0 0 1 0-22.186667z" fill="#4af756" p-id="2398" data-spm-anchor-id="a313x.7781069.0.i18" class=""></path><path d="M497.92 489.386667a21.333333 21.333333 0 0 0 14.933333 5.973333 22.186667 22.186667 0 0 0 14.933334-5.973333 21.333333 21.333333 0 0 0 0-30.293334l-55.04-55.04a21.333333 21.333333 0 0 0-29.866667 0 21.333333 21.333333 0 0 0 0 30.293334z" fill="#4af756" p-id="2399" data-spm-anchor-id="a313x.7781069.0.i20" class=""></path></svg>
            <div style="line-height: 35px; font-size: 16px; font-weight: bold; margin-left: 5px; color: #000000;">诊断结果</div>
          </div>
        </header>
        <div class="result">
          <div class="title">整体情况</div>
          <div class="conclusion">本次考试，本院实考人数为569人，满分100分，最高分95分，平均分76分，个人成绩95分。</div>
        </div>
        <div class="result">
          <div class="title">诊断说明</div>
          <div class="conclusion">老师可能更期待和你面对面沟通哦！</div>
        </div>
        <div class="result">
          <div class="title">学习建议</div>
          <div class="conclusion">老师可能更期待和你面对面沟通哦！</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getKnowledgePoints } from '../../../api/questions.js'
export default {
  name: 'exam',
  data () {
    return {
      score: 95,
      subjectId: 1,
      knowledgePoints: []
    }
  },
  mounted () {
    this.setChart()
    this.getKnowledgePoints()
  },
  methods: {
    setChart () {
      setTimeout(() => {
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            data: ['Allocated Budget', 'Actual Spending']
          },
          radar: {
            // shape: 'circle',
            indicator: [
              { name: '网络层次划分', max: 50 },
              { name: 'IP地址', max: 20 },
              { name: 'http协议', max: 10 },
              { name: '三次握手', max: 20 }
            ]
            // indicator: this.knowledgePoints.indicator
          },
          series: [
            {
              name: 'Budget vs spending',
              type: 'radar',
              data: [
                {
                  value: [42, 16, 10, 15],
                  name: '你的分数'
                },
                {
                  value: [39, 14, 7, 15],
                  name: '院平均分'
                }
              ]
            }
          ]
        }
        let myChart = this.$echarts.init(document.getElementById('knowledgeInfo'))
        myChart.clear()
        myChart.setOption(option, true)
        // window.addEventListener("resize", function () {
        //   myChart.resize()
        // })

        const option2 = {
          // title: {
          //   text: '95',
          //   left: 'center',
          //   top: 'center'
          // },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: '5%',
            left: '70%'
          },
          graphic: {
            type: 'text',
            top: 'center',
            left: '30%',
            style: {
              text: this.score,
              fill: '#333333',
              fontSize: 28,
              fontWeight: 'bold'
            }
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              center: ['35%', '50%'], // 图的位置，距离左跟上的位置
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     fontSize: '40',
              //     fontWeight: 'bold'
              //   }
              // },
              labelLine: {
                show: false
              },
              data: [
                { value: this.score, name: '90-100' },
                { value: 735, name: '80-90' },
                { value: 580, name: '70-80' },
                { value: 484, name: '60-70' },
                { value: 300, name: '60以下' }
              ]
            }
          ]
        }
        let myChart2 = this.$echarts.init(document.getElementById('scoreInfo'))
        myChart2.clear()
        myChart2.setOption(option2, true)
      }, 30)
    },
    format (percentage) {
      return `${percentage}`
    },
    getKnowledgePoints () {
      getKnowledgePoints(this.subjectId).then(res => {
        for (var item of res.data.data) {
          var temp = { name: '', max: 100 }
          temp.name = item.name
          this.knowledgePoints.push(temp)
        }
        console.log(this.knowledgePoints)
      })
    }
  }
}
</script>

<style scoped>
.breadcrumb {
  padding: 20px;
}
.introduction {
  margin: 10px 50px;
  padding: 20px;
  border: 1px solid rgba(91, 92, 91, 0.5);
  border-radius: 20px;
}
.introduction .text1 {
  text-align: left;
  font-weight: bold;
  font-size: 18px;
  line-height: 40px;
}
.introduction .text {
  text-align: left;
  text-indent: 2em;
  font-size: 13px;
  line-height: 30px;
  color: rgba(81, 84, 81, 0.9);
}
.content {
  margin: 10px 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.content .contentBox {
  width: 47%;
  margin: 20px 0;
  height: 360px;
  border:1px solid rgba(57, 58, 59, 0.6);
  border-radius: 20px;
  padding: 8px;
}
.header {
  line-height: 40px;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#knowledgeInfo {
  height: 90%;
  width: 90%;
}
#scoreInfo {
   height: 90%;
   width: 90%;
 }
.el-progress{
  width:70%;
}
.card1{
  width: 160px;
  height: 80px;
  background-color: rgba(198, 198, 234, 0.5);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card1 svg{
  margin-right: 12px;
}
.card2{
  width: 160px;
  height: 80px;
  background-color: rgba(234, 228, 198, 0.5);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card2 svg{
  margin-right: 12px;
}
.result {
  width: 85%;
  margin: 15px auto;
  background-color: rgba(183, 183, 183, 0.19);
  border-radius: 10px;
  padding: 15px;
}
.result .title {
  font-weight: bold;
  font-size: 16px;
  text-align: left;
}
.result .conclusion {
  font-size: 13px;
  color: #777373;
  text-align: left;
  color: #383737;
  text-align: left;
  margin-top: 10px;
  line-height: 20px;
}
</style>
